<template>
  <div>
    <el-form :model="query" label-position="left" ref="queryForm" :inline="true" label-width="70px" class="top-search">
      <el-form-item label="租户ID" prop="tenantId" label-width="60px">
        <el-input v-model="query.tenantId" placeholder="请输入租户ID" clearable @keyup.enter.native="getList(1)" />
      </el-form-item>
      <el-form-item label="租户名称" prop="tenantName" label-width="70px">
        <el-input
          v-model="query.tenantName"
          placeholder="请输入租户名称"
          clearable
          @keyup.enter.native="getList(1)" />
      </el-form-item>
      <el-form-item label-width="0">
        <el-button type="primary" @click="getList(1)">查询</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    
    <div class="g-card">
      <div class="g-card-title mid-action">
        <el-button type="primary" @click="addVisible = true">新建</el-button>
      </div>
      <el-table ref="myTable" v-loading="loading" :data="list">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="租户ID" align="center" prop="tenantId" show-overflow-tooltip />
        <el-table-column label="租户名称" align="center" prop="tenantName" show-overflow-tooltip />
        <el-table-column label="创建时间" align="center" prop="createTime" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <div>{{ row.createTime }}</div>
          </template>
        </el-table-column>
        <el-table-column label="更新时间" align="center" prop="updateTime" show-overflow-tooltip />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="{ row }">
            <el-button type="text" @click="handleEdit(row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="query.pageNum"
          :limit.sync="query.pageSize"
          @pagination="getList()" />
      </div>
    </div>


    <el-dialog
      :title="(addMemberForm.id ? '编辑' : '新建') + '租户'"
      :visible.sync="addVisible"
      width="40%"
      :close-on-click-modal="false">
      <el-form ref="addMemberForm" :model="addMemberForm" :rules="addRules" position="right" label-width="120px">
        <el-form-item label="租户ID" prop="tenantId">
          <el-input v-model="addMemberForm.tenantId" placeholder="请输入租户ID"></el-input>
        </el-form-item>
        <el-form-item label="租户名称" prop="tenantName">
          <el-input v-model="addMemberForm.tenantName" placeholder="请输入租户名称"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOrUpdate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getList, addObj } from '@/api/customer/tenant'
let defaultForm = {
  tenantId: '',
  tenantName: '',
}
export default {
  name: 'tenantList',
  data() {
    return {
      // 查询参数
      query: {
        pageNum: 1,
        pageSize: 10,
        tenantId: undefined,
        tenantName: undefined,
      },
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      addVisible: false,
      addMemberForm: defaultForm,
      addRules: {
        tenantId: [{ required: true, message: '必填项', trigger: 'blue' }],
        tenantName: [{ required: true, message: '必填项', trigger: 'blue' }],
      },
    }
  },
  created() {
    this.getList()
  },
  mounted() {},
  methods: {
    getList(page) {
      page && (this.query.pageNum = page)
      this.loading = true
      getList(this.query)
        .then(({ rows, total }) => {
          this.list = rows
          this.total = +total
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.addMemberForm = defaultForm
      this.$refs['queryForm'].resetFields()
      this.getList(1)
    },
    handleEdit(e) {
      this.addVisible = true
      this.addMemberForm = JSON.parse(JSON.stringify(e))
    },
    /** 新增/编辑 */ 
    addOrUpdate() {
      this.$refs.addMemberForm.validate((validate) => {
        if(validate) {
          addObj(this.addMemberForm).then(res => {
            this.msgSuccess(res.msg)
            this.addVisible = false
            this.resetQuery()
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
